// 高阶组件 - 动态加载
import React, {
  Component,
} from 'react';

// lazyload('') 返回一个组件

const lazyload = (viewName) => (props) => (
  <Bundle comp={() => import('@/views/' + viewName)}>
    {
      (Component) => <Component {...props}/>
    }
  </Bundle>
)
class Bundle extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // module的简写
      mod: null,
    };
  }

  componentWillMount() {
    this.load(this.props);
  }

  // 在组件接收到一个新的prop时被执行。这个方法在初始化render时不会被调用。
  // 旧的props可以通过this.props来获取
  componentWillReceiveProps(nextProps) {
    if (nextProps.comp !== this.props.comp) {
      this.load(nextProps)
    }
  }

  load(props) {
    this.setState({
      mod: null
    })
    // 动态获取组件
    props.comp().then(mod => {
      this.setState({
        mod: mod.default ? mod.default : mod
      })
    })
  }

  render() {
    // this.props.children是组件props的隐藏属性，它的值是一个数组，数组元素为ReactElement。
    return this.state.mod ? this.props.children(this.state.mod) : null
  }
}
export default lazyload;
